// subPages/health/sport/sport.js
import * as echarts from '../../../ec-canvas/echarts';
var util =  require('../../../utils/util.js');
var navListJson = require('../../../data/navListJson');
var recordJson = require('../../../data/recordJson');
let LineChart = null
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // currentTab: 0,
    ec: {
      // lazyLoad: true // 延迟加载
    },
    // time: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    if(options){
      that.setData({
        weight: options.weight,
        sportList: JSON.parse(options.sportList),
        navList: navListJson.dateNaveList,
      })
      that.getData(that.data.sportList)
    }
    // let date = util.setTime7(new Date())//日
    // let date1 = util.setTime10(new Date())//月
    // that.setData({
    //   date: date,
    //   date1: date1,
    //   
    // })
    // 
  },

  //获得数据
  getData:function(sportList){
    var that = this
    var index = 0
    for(var i in sportList){
      sportList[i].kpa = util.kcal(that.data.weight,sportList[i].step)
      sportList[i].index = index++
    }
    // console.log(sportList)
    that.processingEchartData(sportList)
    that.setData({
      sportList: sportList.reverse()
    })
    
    // wx.request({
    //   url: app.globalData.apiUrl +'/get_user_sport',
    //   data: {
    //     userid: app.globalData.userId,
    //     time: time,
    //     time1: time1
    //   },
    //   method: 'get',
    //   header: {
    //     'content-type': 'application/json' //默认值
    //   },
    //   success: function (res) {
    //     // console.log(res)
    //     if(res.data.code == '200'){
    //       that.setData({
    //         dataList: res.data.data
    //       })
    //       that.processingEchartData(res.data.data);
    //     }else{
    //       util.showModal('提示','数据异常')
    //       return;
    //     }
    //   },
    //   fail: function (res) {
    //     console.log("失败",res);
    //   }
    // })
  },

  //获取图表数据
  processingEchartData:function(list){
    // console.log(list)
    var that = this
    if(list.length != 0){
      var echartTime = []
      var stepList = []
      for(var i in list){
        echartTime.push(list[i].timestamp)
        stepList.push(list[i].step)
      }
      that.setData({
        isData: true,
        stepList: stepList,
        echartTime: echartTime
      })
      that.linechartsComponnet = that.selectComponent('#mychartLine');
      LineChart = null
      that.getLineGraphData();  //创建图表
    }else{
      that.setData({
        isData: false,
        tipTxt: {
          tipTxt: '暂无测量数据',
          tipImg: '/resources/index/noData.png'
        }
      })
    }
  },

  //线图表
  getLineGraphData:function(){
    var that = this
    if (!LineChart){
      that.init_LineEcharts(); //初始化图表
    }else{
      that.setLineOption(); //更新数据
    }
  },

  //初始化图表
  init_LineEcharts: function () {
    var that = this
    that.linechartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      LineChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      LineChart.showLoading({
        text : '正在努力的读取数据中...'
      });
      // Chart.setLineOption(this.getLineOption());
      that.setLineOption();
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return LineChart;
    });
  },

  setLineOption: function () {
    LineChart.clear();  // 清除
    LineChart.setOption(this.getLineOption());  //获取新数据
  },

  //设置折线图表
  getLineOption: function () {
    var that = this
    // 指定图表的配置项和数据
    var option = {
      title : {
        text: '',
        subtext: ''
      },
      grid:{ 
        borderWidth:0,
        x:0,
        y:30,
        x2:0,
        y2:0,
        containLabel: true
      },
      xAxis: { 
        type: 'category',
        show:true,
        boundaryGap:true,
        data : that.data.echartTime,
        axisLine:{
          show:true,
          lineStyle:{
            color: 'white',
            width: 1,
          }
        },
        axisTick:{
          show:false
        },
        axisLabel:{
          show:true,
          color: 'white',
          interval: 0,
          formatter: '{value}',
          formatter:function(value){
            return util.setTime13(value) + '日'
          }
        },
      },
      yAxis: {
        type: 'value',
        boundaryGap:false,
        show:true,
        scale: false,
        splitNumber:2,
        axisLine:{
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine:{
          show:true,
          lineStyle:{
            color: 'rgba(255,255,255,0.3)',
          }
        },
        axisLabel:{
          show: true,
          inside: true,
          verticalAlign: 'bottom',
          margin: 0,
          color: '#76ebdc',
          formatter:function(value,index){
            return value
          }
        },
      },
      dataZoom:[
        {
          show: false,
          type:'slider',
          start: util.dataZoom(that.data.echartTime),
          end: 100,
          left:'3%',
          right:'3%',
          maxValueSpan: 10,
        },
        {
          type: 'inside',
        },
      ],
      series : [{
        name:'',
        type:'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 12,
        itemStyle : {
          normal: {
            color: '#fff',
          },
        },
        emphasis:{
          label:{
            show: true,
            position: 'top',
            formatter:function(params){
              return params.data + '步';
            }
          },
          itemStyle:{
            borderWidth: 12,
            borderType:'solid',
            borderColor: 'rgba(255,255,255,0.5)'
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        data: that.data.stepList
      }]
    };
    LineChart.hideLoading()
    return option;
  },

  //记录按钮
  // recordBtn: function (e) {
  //   // console.log(e);
  //   var currentStatu = e.currentTarget.dataset.statu;
  //   this.anim(currentStatu);
  // },

  // //动画部分
  // anim: function (currentStatu) {
  //   // 第1步：创建动画实例 
  //   var animation = wx.createAnimation({
  //     duration: 200,  //动画时长
  //     timingFunction: "linear", //线性
  //     delay: 0  //0则不延迟
  //   });
    
  //   // 第2步：这个动画实例赋给当前的动画实例
  //   this.animation = animation;
 
  //   // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是400px)，停
  //   animation.translateY(300).step();
 
  //   // 第4步：导出动画对象赋给数据对象储存
  //   this.setData({
  //     animationData: animation.export()
  //   })
    
  //   // 第5步：设置定时器到指定时候后，执行第二组动画
  //   setTimeout(function () {
  //     // 执行第二组动画：Y轴不偏移，停
  //     animation.translateY(0).step()
  //     // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
  //     this.setData({
  //       animationData: animation
  //     })
      
  //     //完成
  //     if (currentStatu == "complete") {
  //       this.setData(
  //         {
  //           isHeight: false,
  //         }
  //       );
  //     }

  //     //取消
  //     else if (currentStatu == "cancel") {
  //       this.setData(
  //         {
  //           isHeight: false,
  //         }
  //       );
  //     }
  //   }.bind(this), 200)
  
  //   // 显示抽屉
  //   if (currentStatu == "open") {
  //     this.setData(
  //       {
  //         isHeight: true,
  //         title: '运动记录',
  //         recordList: recordJson.sport,
  //       }
  //     );
  //   }
  // },

  // //提交表单
  // formSubmit:function(e){
  //   console.log(e)
  //   var that = this
  //   let step = e.detail.value.step;//步数
  //   let kCal = e.detail.value.kCal;//卡路里
  //   if (step == "" || kCal == ""){
  //     util.showModal('提示','请输入完整信息')
  //     return
  //   }
  //   if(step.length > 0)
  //   {
  //     let type= 'number'
  //     let validation = util.validation(step,type)
  //     if(!validation){
  //       util.showModal('提示','运动步数输入不正确')
  //       return
  //     }
  //   }
  //   if(kCal.length > 0)
  //   {
  //     let type= 'number'
  //     let validation = util.validation(kCal,type)
  //     if(!validation){
  //       util.showModal('提示','运动消耗输入不正确')
  //       return
  //     }
  //   }
  //   that.save(step,kCal);
  // },

  //保存信息
  // save:function(step,kCal){
  //   var that = this
  //   wx.request({
  //     url: app.globalData.apiUrl +'/add_user_sport', //接口地址
  //     data: {
  //       userid: app.globalData.userId,
  //       kpa: kCal,
  //       num: step,
  //     },
  //     method: 'post',
  //     header: {
  //         'content-type': 'application/x-www-form-urlencoded' //默认值
  //     },
  //     success: function (res) {
  //       // console.log(res)
  //       if(res.data.code == '200'){
  //         util.showToast('保存成功','success')
  //         that.getData(that.data.time);
  //       }else{
  //         util.showModal('提示','记录失败')
  //         return;
  //       }
  //     }
  //   })
  // },

  // //选择导航栏
  // switchNav(event){
  //   var that = this
  //   var cur = event.currentTarget.dataset.current;      
  //   if (that.data.currentTab == cur) {
  //     return false;
  //   } else {
  //     that.setData({
  //         currentTab: cur
  //     })
  //     that.setEchartsData(cur);
  //   }
  // },

  // //给图表赋值
  // setEchartsData:function(cur){
  //   var that = this
  //   var time =''
  //   switch (cur) {
  //     case 0:
  //       time = 1
  //       that.getData(time,that.data.date)
  //       break;
  //     case 1:
  //       time = 2
  //       that.getData(time,that.data.date1)
  //       break;
  //   }
  // },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: 'PAPN健康管理',
      path: 'pages/index/index',
      success: function(res) {
        // res.shareTickets 
      },
      fail: function(res) {
          console.log(res)
      }
    }
  }
})